<script setup>
import Amaptilelayer from './components/amaptilelayer.vue';
import Tiandimapbox from './components/tiandimapbox.vue';

import TiandituMap from './components/TiandituMap.vue'
import LeafletTiandiMap from './components/leafletTiandi.vue'

function mapReady({ map, T }) {
  //
  const locationPointer =  {lng: 113.72891, lat: 34.77358}
  // 设置中心点坐标
  map.centerAndZoom(new T.LngLat(locationPointer.lng, locationPointer.lat), 18)
}

const loca = { lng: 113.72891, lat: 34.77358 }
</script>

<template>
  <div class="app-container">
    <TiandituMap />
    <!-- <LeafletTiandiMap /> -->
    <!-- <tiandi-map :zoom="18" :center="loca" @ready="mapReady">
      <t-marker :position="loca" />
      <t-label text="test3" :offset="{ x: 10, y: 30 }" :position="loca" />
      <t-zoom />
    </tiandi-map> -->
    <!-- <Tiandimapbox :token="'92f04938ca9c359ddf56ea7f8bcd194f'" /> -->
    <!-- <Amaptilelayer ></Amaptilelayer> -->
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
}

.app-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
